<template>
  <el-container>
    <el-aside width="220px">
      <el-menu :router="true" text-color="#999" :default-active="activeMenu" bg-color="red" @select="select"
        default-openeds="">
        <menuItem v-for="(item, index) in Menus" :key="index" :item="item">
        </menuItem>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="padding: 0 40px">
        <img src="https://cdn7.axureshop.com/demo/1881228/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u408.jpg" alt="" />
        <div style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-right: 100px;
          ">
          <el-avatar :src="`http://127.0.0.1:3000/${userInfo.picture}`" />
          <el-dropdown style="margin: 0 15px">
            <span class="el-dropdown-link">
              {{ userInfo.name }}
              <el-icon>
                <CaretBottom />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="ModifyInfo">我的资料</el-dropdown-item>
                <el-dropdown-item @click="ModifyPwd">修改密码</el-dropdown-item>
                <el-dropdown-item @click="out">退出系统</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <!-- <div class="nav">
        <el-tag class="mx-1" closable> 123 </el-tag>
        <el-tag class="mx-1" closable> 123 </el-tag>
        <el-tag class="mx-1" closable> 123 </el-tag>
      </div> -->
      <el-main>
        <!-- v-slot="{ Component }" -->
        <!-- <transition name="fade" mode="out-in">
            <component :is="Component"></component>
          </transition> -->
        <router-view>

        </router-view>
      </el-main>
      <div class="footer">Copyright © DaisyAxure All Rights Reserved</div>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import menuItem from "@/components/yzy/menuItem.vue";
import { useRouter } from "vue-router";
import { ref, Transition } from "vue";
import api from "@/api";
import route from "@/utils/yzy/route";
const router = useRouter();
//菜单列表
const Menus = ref("");
//激活的菜单
const activeMenu = ref("");
//获取列表
const getMenus = async () => {
  let result = await api.user.getMenuApi();
  Menus.value = result.data.data;
  //store.getRoutesAction();
  route();
};
//点击左侧菜单
const select = (index: any) => {
  localStorage.setItem("index", index);
};
//用户信息
const userInfo = ref({ name: "错误", picture: "姚泽宇" });
//获取角色信息
const getUserInfo = async () => {
  const id = localStorage.getItem("user_id");
  let result = await api.user.getUserInfo(id);
  userInfo.value = result.data.data;
  console.log(userInfo.value, "info");
};
//个人资料
const ModifyInfo = () => { };
//用户密码修改
const ModifyPwd = () => {
  router.push("/home/ModifyPassword");
};
//退出
const out = () => {
  localStorage.removeItem("token");
  localStorage.removeItem("user_id");
  localStorage.removeItem("my_user");
  localStorage.removeItem("index");
  router.push("/login");
};
activeMenu.value = localStorage.getItem("index") as string;
getMenus();
getUserInfo();
</script>

<style lang="scss" scoped>
// .fade-enter-active,
// .fade-leave-active {
//   transition: opacity 0.5s;
// }

// .fade-enter-from,
// .fade-leave-to {
//   opacity: 0;
// }
.el-container {
  .el-container {
    margin-left: 200px;
  }
}

.el-aside {
  height: 100vh;
  position: fixed;
  z-index: 1000;

  .el-menu {
    border: none;
  }
}

.el-header {
  position: sticky;
  top: 0;
  z-index: 999;
}

.el-main {
  height: 100vh;
  background-color: rgba(242, 247, 251, 1);
  margin-left: 20px;
}

.nav {
  display: flex;
  align-items: center;
  height: 40px;
  position: sticky;
  top: 60px;
  background-color: white;

  .el-tag {
    margin: 0 5px;
  }
}

.el-header {
  background-color: white;
  padding: 0 20px;
  @include flex(between, center, none);

  img {
    height: 32px;
    width: 32px;
  }

  .el-dropdown {
    margin-right: 100px;

    .el-dropdown-menu {
      font-size: 12px;
    }
  }
}

.footer {
  font-size: 12px;
  color: #ccc;
  margin: 20px auto;
}
</style>
